html {
    font-size: 75px;
}
body {
    min-width: 320px;
    width: 10rem;
    margin: 0 auto;
    background-color: #f6f6f6;
    color: #333;
    text-decoration: none;
    text-align: center;;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}
/* 点击高亮我们需要清除，设置为transparent 完成透明 */
* {
    -webkit-tap-high-color: transparent;
}
/* 在移动端浏览器默认的外观在iOS上加这个属性才能给按钮和输入框自定义样式 */
input {
    -webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,a {
    -webkit-touch-callout: none;
}
// 跳转APP
.top-tips {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 10rem;
    height: 1.2rem;
    background-color: #333;
    font-size: .373333rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    .close {
        width: 8%;
        height: 1.2rem;
        img {
            width: .266667rem;
        }
    }
    .logo {
        width: 10%;
        height: .8rem;
        img {
            width: .8rem;
        }
    }
    .open {
        width: 57%;
        height: 1.2rem;
    }
    .now {
        width: 25%;
        height: 1.2rem;
        background-color: #FA562E;
    }
}
// 搜索框
.search-box {
    display: flex;
    align-items: center;
    position: fixed;
    top: 1.2rem;
    left: 0;
    width: 10rem;
    height: 1.173333rem;
    z-index: 20;
    .search-btn {
        display: flex;
        justify-content: center;
        width: 1.333333rem;
        height: .48rem;
        span {
            width: .533333rem;
            height: .48rem;
            background: url(../images/s-btn.png) no-repeat 0 0;
            background-size: 533333rem .48rem;
        }
    }
    .login {
        width: 1.386667rem;
        height: 1.173333rem;
        line-height: 1.173333rem;
        font-size: .373333rem;
        color: #fff;
        text-align: center;
    }
    .search {
        display: flex;
        position: relative;
        align-items: center;
        width: 7.28rem;
        height: .8rem;
        padding-left: .4rem;
        background-color: #fff;
        border-radius: .4rem;
        span {
            width: .533333rem;
            height: .4rem;
            background: url(../images/logo2.png) no-repeat 0 0;
            background-size: .533333rem .4rem;
            &::after {
                content: "";
                position: absolute;
                left: 1.093333rem;
                width: .026667rem;
                height: .4rem;
                background-color: #ddd;
            }
        }
        i {
           width: .48rem; 
           height: .4rem;
           position: absolute;
           background: url(../images/jd-sprites.png) no-repeat -2.186667rem 0;
           left: 1.373333rem;
           background-size: 5.333333rem 5.333333rem;
        }
        input {
            position: absolute;
            left: 2.08rem;
            border: 0;
            background-color: transparent;
            font-size: .32rem;
            color: #a9a9a9;
            line-height: .8rem;;
        }
    }
}
// 主要内容
.content {
    width: 100%;
    margin-top: 1.2rem;
    background-color: #f6f6f6;
    // 焦点图
    .banner {
        position: relative;
        width: 100%;
        height: 4.986667rem;
        overflow: hidden;
        .banner-bg {
            position: absolute;
            width: 150%;
            left: -25%;
            height: 3.866667rem;
            border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
            background-image: linear-gradient(0deg, #f1503b,#c82519 50%);
        }
        ul {
            position: relative;
            list-style: none;
            margin: 0;
            li {
                position: absolute;
                left:0;
                top: 0;
                width: 100%;
                height: 4.986667rem;
                padding: 1.2rem 3.333% 0;
                box-sizing: border-box;
                &:nth-child(2) {
                    left: 100%;
                }
                &:nth-child(3) {
                    left: 200%;
                }
                &:nth-child(4) {
                    left: 300%;
                }
                &:nth-child(5) {
                    left: 400%;
                }
                a {
                    display: block;
                    img {
                        display: block;
                        width: 100%;
                        border-radius: .266667rem;
                    }
                }
            }
        }
    }
    // 优惠活动
    .youhui {
        display: flex;
        width: 100%;
        overflow: hidden;
        a {
            width: 33.333%;
            img {
                width: 100%;
            }
        }
    }
    // 导航
    nav {
        width: 100%;
        height: 4.32rem;
        overflow: hidden;
        .mall-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 20%;
                height: 20%;
                font-size: .32rem;
                color: #666;
                text-decoration: none;
                text-align: center;
                img {
                    width: 1.066667rem;
                }
                span {
                    height:  .88rem;;
                    line-height: .88rem;
                }
            }
        }
    }
    // 新人专享
    .new {
        display: flex;
        margin: .32rem;
        overflow: hidden;
        a {
            width: 50%;
            img {
                width: 100%;
            }
        }
    }
    // 产品
    .product {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: center;
        width: 9.36rem;
        margin: -.32rem .32rem;
        border-radius: .32rem;
        padding: .32rem;
        background-color: #fff;
        overflow: hidden;
        box-sizing: border-box;
        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 25%;
            padding-top: .32rem;
            padding-bottom: .32rem;
            text-decoration: none;
            h3 {
                margin: 0;
                padding: 0;
                width: 2rem;
                font-size: .426667rem;
                color: #000;
                text-align: left;
                line-height: .426667rem;
                p {
                    font-size: .0032rem;
                    color: #222;
                    font-weight: 200;
                    text-align: left;
                }
            }
            img {
                width: 1.8rem;
                margin: 0 auto;
            }
        }
    }
}

